<template>
  <fix-area ref="fixArea">
    <form-block ref="form" :model="form" :rules="formRules">
      <el-form-item label="电话" prop="telphone">
        <el-input v-model="form.telphone" placeholder="请输入电话号码(非必填)" :clearable="true" @clear="$refs.form.validateField(['telphone'])" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="form.nickname" placeholder="请输入昵称(非必填)" :clearable="true" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查 询</el-button>
      </el-form-item>
    </form-block>
    <div style="flex: 1; min-height: 0;width: 100%">
      <table-block :loading="loading" :data="userList">
        <table-column label="昵称" width="220px" prop="nickname" />
        <table-column label="电话" width="120px" prop="telphone" />
        <table-column label="积分" width="120px" prop="score" />
        <table-column label="头像" width="120px" prop="face" :use-slot="true">
          <template #default="{row}">
            <div style="cursor: pointer" @click="$refs.fixArea.previewImg(row.face)">
              <cell-media :url="row.face" />
            </div>
          </template>
        </table-column>
        <table-column label="创建时间" prop="create_time" />
      </table-block>
    </div>
    <pagination :current-page="form.page" :total="total" @current-change="currentChange" />
  </fix-area>
</template>
<script>
import { userList } from '@/api/user'
export default {
  name: 'User',
  data() {
    return {
      userList: [],
      // 表单
      form: {
        // 电话
        telphone: '',
        // 昵称
        nickname: '',
        // 页码
        page: 1
      },
      formRules: {
        telphone: [
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (!value) {
                callback()
              }
              const reg = /^1[3-9]\d{9}$/
              if (reg.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确格式的手机号码'))
              }
            }
          }
        ]
      },
      total: 0,
      loading: false
    }
  },
  async mounted() {
    this.loading = true
    try {
      await this.getUserList(this.form)
    } catch (error) {
      this.$errorMessage()
      this.userList = []
    } finally {
      this.loading = false
    }
  },
  methods: {
    // 获取用户列表
    async getUserList(form) {
      const userListRes = await userList(form)
      this.total = userListRes.data.total
      this.userList = userListRes.data.data
    },
    async currentChange(event) {
      this.loading = true
      try {
        this.form.page = event
        await this.getUserList(this.form)
      } catch (error) {
        this.$errorMessage()
        this.userList = []
      } finally {
        this.loading = false
      }
    },
    async search() {
      this.$refs.form.validate(async(valid) => {
        if (!valid) {
          this.$errorMessage('请检查搜索项是否符合格式要求')
          return
        }
        this.loading = true
        try {
          await this.getUserList(this.form)
        } catch (error) {
          this.$errorMessage()
          this.userList = []
        } finally {
          this.loading = false
        }
      })
    }
  }
}
</script>
